<template>
	<div class="login-background">
		<span class="title">图形中心</span>
		<div class="login-container">
			<el-form :model="form" ref="loginForm" label-width="100px">
				<el-form-item label="用户名" prop="username" rule="">
					<el-input
						v-model="form.username"
						autocomplete="off"
						placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password" rule="">
					<el-input
						v-model="form.password"
						autocomplete="off"
						placeholder="请输入密码"
						type="password"></el-input>
				</el-form-item>
				<!-- <el-form-item label="租户ID" prop="tenantId" rule="">
					<el-input
						v-model="form.tenantId"
						autocomplete="off"
						placeholder="请输入租户ID"></el-input>
				</el-form-item> -->
				<el-form-item label="在线应用ID" prop="appId" rule="">
					<el-input v-model="appId" autocomplete="off" placeholder="仅在线预览时需填"></el-input>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="loginConfig.rememberPassword" label="记住密码" size="large" />
				</el-form-item>
				<el-form-item>
					<el-button type="danger" plain @click="localLogin">本地开发</el-button>
					<el-button type="primary" plain :loading="loginLoading" @click="() => handleLogin(0)">
						本地开发（登录）
					</el-button>
					<el-button class="float-right" plain type="success" @click="() => handleLogin(1)">
						在线预览Demo（默认）
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// import * as API from '@/api/app';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import storage from '@/utils/storage.js';
// import { pwdEncrypt } from '@/utils/encryption/pwd';
// import config from '@/config';
import { useMainStore } from '@/store';
import pwdEncrypt, { pwdDecrypt } from '@/utils/requestDesign/encryption/pwd';
import { getLocalstorage } from '@utils/localstorage';
import { useStorage } from '@vueuse/core';

// const { baseProxy } = config;
const store = useMainStore();
// console.log('config', config, baseProxy);

const router = useRouter();
const loginConfig = useStorage('login-config', {
	rememberPassword: true,
	username: '',
	password: ''
});
const appId: any = ref(''); // 1789173970436624386
const form: any = ref({
	username: loginConfig.value.username,
	password: pwdDecrypt(loginConfig.value.password),
	scope: 'all',
	tenantId: getLocalstorage('tenantId'),
	// tenantId: '100029',
	grant_type: 'password'
});
function localLogin() {
	storage.remove('access_token');
	ElMessage({
		message: '本地登录',
		type: 'warning'
	});
	// window.location.pathname = '/local';
	router.push({ path: '/local' });
}
const loginLoading = ref<boolean>(false);
// function handleLogin(flag = 0) {
// 	loginLoading.value = true;
// 	API.getToken({ ...form.value, password: pwdEncrypt(form.value.password) })
// 		.then((res: any) => {
// 			console.log('login success', res);
// 			if (res.access_token) {
// 				storage.set('access_token', res.access_token);
// 				storage.set('user', JSON.stringify(res));
// 			}
// 			if (flag === 1) {
// 				if (!appId.value) {
// 					ElMessage.error('请填写在线应用id');
// 					return;
// 				}
// 				router.push({ path: '/online', query: { applicationId: appId.value } });
// 			} else {
// 				router.push({ path: '/local' });
// 			}
// 		})
// 		.catch((err: any) => {
// 			if (err?.response?.status === 401) {
// 				ElMessage.error(err.response.data);
// 			} else if (typeof err === 'string') {
// 				ElMessage.error(`${err}`);
// 			}
// 		})
// 		.finally(() => {
// 			loginLoading.value = false;
// 		});
// }
const handleLogin = async (flag = 0) => {
	loginLoading.value = true;
	try {
		const params = {
			username: form.value.username,
			password: pwdEncrypt(form.value.password),
			grant_type: 'password'
		};
		if (flag === 1) {
			if (!appId.value) {
				ElMessage.error('请填写在线应用id');
				return;
			}
			await store.loginFunction(params);

			router.push({
				path: '/preview',
				query: { applicationId: appId.value, tenantId: form.value.tenantId }
			});
			const { rememberPassword } = loginConfig.value;
			loginConfig.value.username = rememberPassword ? form.value.username : '';
			loginConfig.value.password = rememberPassword ? pwdEncrypt(form.value.password) : '';
		} else {
			await store.loginFunction(params);
			router.push({ path: '/local', query: { tenantId: form.value.tenantId } });
			const { rememberPassword } = loginConfig.value;
			loginConfig.value.username = rememberPassword ? form.value.username : '';
			loginConfig.value.password = rememberPassword ? pwdEncrypt(form.value.password) : '';
		}
	} catch (err: any) {
		if (err?.response?.status === 401) {
			ElMessage.error(err.response.data);
		} else if (typeof err === 'string') {
			ElMessage.error(`${err}`);
		}
	} finally {
		loginLoading.value = false;
	}
};

defineExpose({});
</script>

<style lang="scss" scoped>
.title {
	position: absolute;
	z-index: 10;
	display: flex;
	top: 180px;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-size: 5rem;
	color: transparent;
	font-weight: 700;
	text-shadow:
		0px 0px 1px rgba(255, 255, 255, 0.6),
		0px 4px 4px rgba(0, 0, 0, 0.05);
	letter-spacing: 0.2rem;
}
.login-background {
	width: 100vw;
	height: 100vh;
	// background: url('/static/img/bg-medium.jpeg') no-repeat;
	background-size: cover;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	margin: 0;
	min-height: 100vh;
	background-color: #0c75c5;
	background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
		radial-gradient(closest-side, rgb(3, 4, 51), rgba(243, 11, 164, 0)),
		radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
		radial-gradient(closest-side, rgb(7, 160, 231), rgba(170, 142, 245, 0)),
		radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
	background-size:
		130vmax 130vmax,
		80vmax 80vmax,
		90vmax 90vmax,
		110vmax 110vmax,
		90vmax 90vmax;
	background-position:
		-80vmax -80vmax,
		60vmax -30vmax,
		10vmax 10vmax,
		-30vmax -10vmax,
		50vmax 50vmax;
	background-repeat: no-repeat;
	animation: 10s movement linear infinite;
	&:after {
		content: '';
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	:deep(.el-input__wrapper .el-input__inner) {
		color: white;
	}
}
@keyframes movement {
	0%,
	100% {
		background-size:
			130vmax 130vmax,
			80vmax 80vmax,
			90vmax 90vmax,
			110vmax 110vmax,
			90vmax 90vmax;
		background-position:
			-80vmax -80vmax,
			60vmax -30vmax,
			10vmax 10vmax,
			-30vmax -10vmax,
			50vmax 50vmax;
	}
	25% {
		background-size:
			100vmax 100vmax,
			90vmax 90vmax,
			100vmax 100vmax,
			90vmax 90vmax,
			60vmax 60vmax;
		background-position:
			-60vmax -90vmax,
			50vmax -40vmax,
			0vmax -20vmax,
			-40vmax -20vmax,
			40vmax 60vmax;
	}
	50% {
		background-size:
			80vmax 80vmax,
			110vmax 110vmax,
			80vmax 80vmax,
			60vmax 60vmax,
			80vmax 80vmax;
		background-position:
			-50vmax -70vmax,
			40vmax -30vmax,
			10vmax 0vmax,
			20vmax 10vmax,
			30vmax 70vmax;
	}
	75% {
		background-size:
			90vmax 90vmax,
			90vmax 90vmax,
			100vmax 100vmax,
			90vmax 90vmax,
			70vmax 70vmax;
		background-position:
			-50vmax -40vmax,
			50vmax -30vmax,
			20vmax 0vmax,
			-10vmax 10vmax,
			40vmax 60vmax;
	}
}
.login-container {
	width: 600px;
	height: 300px;
	position: absolute;
	top: calc(50% - 150px);
	left: calc(50% - 300px);
	z-index: 99;

	:deep(.el-form-item__label) {
		color: #ebeaea;
	}

	.float-right {
		float: right;
	}
}
</style>
